<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>数据源管理</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<script src="/style/public/publicStyle.js"></script>
	<script>
		/*layui.use(['form'], function() {
            var form = layui.form,
                $ = layui.jquery;
            $(function() {
                if(pageloadauthority("/views/basedb.html")==true){
                    $("body").attr("style","display:block;");
                    return;
                }
                atuLoginToken();
            })
        });*/
	</script>
	<style type="text/css">
		.layui-table-tool-panel li .layui-form-checkbox[lay-skin=primary] {
			/* width: 100%; */
			padding-left: 28px;
		}

		.layui-table-tool-panel li {
			line-height: 30px;
			-webkit-transition: .5s all;
			transition: .5s all;
			padding-left: 10px;
			padding-right: 47px;
		}
	</style>
</head>

<body >
<div class="weadmin-nav">
			<span class="layui-breadcrumb" style="visibility: visible;">
			<a href="">任务管理</a><span lay-separator="">/</span>
			<a>
				<cite>数据库字段类型</cite></a>
			</span>
	<a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
		<i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>

<!--表格-->
<div class="weadmin-body">
	<div class="layui-row">
		<table class="layui-hide" id="tableDataList" lay-filter="usertab"></table>
	</div>
</div>

<!--表格操作-->
<script type="text/html" id="op">
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete">删除</a>
</script>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" lay-event="getCheckData">新增</button>
	</div>
</script>

<div class="layui-row" id="tableForm" style="display:none;">
	<div class="layui-col-md10">
		<form class="layui-form layui-from-pane" id="formId" style="margin-top:20px" lay-filter="tableForm">
			<input type="hidden" name="idDbTpcomp"/>
			<div class="layui-form-item">
				<label class="layui-form-label">数据库类型</label>
				<div class="layui-input-block">
					<select name="euDbtp" lay-filter="euDbtp">
						<option value="mysql">mysql</option>
						<option value="oracle" selected="">oracle</option>
						<option value="sqlserver" selected="">sqlserver</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">字段类型</label>
				<div class="layui-input-block">
					<input type="text" name="euFldtp"  required  lay-verify="required" autocomplete="off" placeholder="请输入字段类型" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">标准类型</label>
				<div class="layui-input-block">
					<select name="euJavatp" lay-filter="euJavatp">
						<option value="STRING">字符串</option>
						<option value="NUMBER">数值型</option>
						<option value="BYTE" selected="">二进制</option>
						<option value="DATE" selected="">日期</option>
						<option value="TIMESTAMP" selected="">时间戳</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">长度</label>
				<div class="layui-input-block">
					<input type="text" name="numLength"  required  lay-verify="required" autocomplete="off" placeholder="请输入数据库名称" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">小数标志</label>
				<div class="layui-input-block">
					<select name="fgDeci" lay-filter="fgDeci">
						<option value="0">否</option>
						<option value="1">是</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">默认标志</label>
				<div class="layui-input-block">
					<select name="fgDef" lay-filter="fgDef">
						<option value="0">否</option>
						<option value="1">是</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item" style="margin-top:40px">
				<div class="layui-input-block">
					<button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="demo11">保存</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
</div>

</body>
<script>
	layui.use(['util','laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
		var util = layui.util;
		var laydate = layui.laydate //日期
				,laypage = layui.laypage //分页
				,layer = layui.layer //弹层
				,table = layui.table //表格
				,carousel = layui.carousel //轮播
				,upload = layui.upload //上传
				,element = layui.element //元素操作
				,form = layui.form;
		var logintoken= null;
		getSharreTieba_LoginToken();
table.render({
elem: '#tableDataList'
,even: true //开启隔行背景
,cellMinWidth: 80
,toolbar: '#toolbarDemo'
,url:global_visit_url_prefix+'/etl/baseDbTpcomp/find'
,where:{
	LoginKey:logintoken,
}
,cols: [[
,{field:'idDbTpcomp', title: 'ID', hide:true}
,{field:'euDbtp', title: '数据库类型',width:80}
,{field:'euFldtp', title: '字段类型',}
,{field:'euJavatp', title: '标准类型',}
,{field:'numLength', title: '长度',}
,{field:'fgDeci', title: '小数标志'}
,{field:'fgDef', title: '默认标志'}
,{fixed: 'right', title: '操作', align:'center', toolbar: '#op'}
]]
,page: false
});

//监听行工具事件
		table.on('tool(usertab)', function(obj){ //注：tool 是工具条事件名，usertab 是 table 原始容器的属性 lay-filter="对应的值"
			debugger;
			var data = obj.data //获得当前行数据
					,layEvent = obj.event; //获得 lay-event 对应的值
			if(layEvent == 'edit'){
				layer.open({
					//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
					type: 1,
					title: "编辑数据源",
					area: ['520px', '530px'],
					content: $("#tableForm")//引用的弹出层的页面层的方式加载修改界面表单
				});
				//动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示，当然也是异步请求的要数据的修改数据的获取
				setFormValue(obj,data);
			}else if(layEvent == 'delete'){
				layer.confirm('确定数据源要删除数据源'+data.na+'吗？', {
					btn: ['确定','取消'], //按钮
				}, function(){
					layer.closeAll('dialog');
					$.ajax({
						type:"get",
						url:"/etl/baseDbTpcomp/delete",
						async:true,
						data:{'idDbTpcomp':data.idDbTpcomp},
						success:function(json){
							table.reload("tableDataList");
						}
					});
				});
			}
		});

//监听修改操作
		/*table.on('edit(usertab)', function(obj){
			debugger;
			var value = obj.value //得到修改后的值
					,data = obj.data //得到所在行所有键值
					,field = obj.field; //得到字段
			console.log(data);
			debugger;
			$.ajax({
				type:"POST",
				url:"http://localhost:8086/etl/baseDbTpcomp/update",
				async:true,
				data:{'user':JSON.stringify(data)},
				success:function(json){

				}
			});
			layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
		});*/

//监听表头
		table.on('toolbar(usertab)', function(obj){
			var checkStatus = table.checkStatus(obj.config.id);
			switch(obj.event){
				case 'getCheckData':
					layer.open({
						//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
						type: 1,
						title: "新增数据源",
						area: ['520px', '530px'],
						content: $("#tableForm")//引用的弹出层的页面层的方式加载修改界面表单
					});
					setFormValue(obj,null);
					break;
			};
		});

		//监听弹出框表单提交，massage是修改界面的表单数据'submit(demo11),是修改按钮的绑定
		function setFormValue(obj,data){
			if(data==null) {
				$("#formId")[0].reset();
			} else {
				form.val("tableForm",data);
			}
			form.on('submit(demo11)', function(massage) {
				$.ajax({
					url:'/etl/baseDbTpcomp/save',
					type:'post',
					dataType:'json',
					contentType:'application/json;charset=UTF-8',
					data:JSON.stringify(massage.field),
					success:function (msg) {
						debugger;
						var returnCode = msg.returnCode;//取得返回数据（Sting类型的字符串）的信息进行取值判断
						if(returnCode==200){
							layer.closeAll('loading');
							layer.load(2);
							layer.msg("修改成功", {icon: 6});
							setTimeout(function(){
								obj.update({
									eqptType:massage.field.neweqptType,
									eqptIdCode:massage.field.neweqptIdCode,
									eqptName:massage.field.neweqptName
								});//修改成功修改表格数据不进行跳转
								layer.closeAll();//关闭所有的弹出层
							}, 1000);
						}else{
							layer.msg("修改失败", {icon: 5});
						}
					}
				})
			})
		}
	});



</script>

</html>